<template>
    <teleport to='body'>
        <a class="back" @click="goBack">
            <img src="/images/back.png"/>
        </a>
    </teleport>
</template>

<script>
import { reactive,toRefs,onMounted,getCurrentInstance,computed } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {H5CallAPPFuction} from '@/utils/common'
export default {
    props:['title','to','type'],
    setup(props,context){
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            statusBarHeight:computed(()=>store.state.base.statusBarHeight)
        })
        onMounted(()=>{
            //console.log("history:",window.history.state)
        })
        const goBack = ()=>{
            const historyState = window.history.state
            if(props.to){
               router.push(props.to)
            }else if(historyState.back){ // 判断是否有上一页
                router.back()
            }else{
                try {
                    console.log("返回处理准备调用app方法")
                    H5CallAPPFuction('backToHome','0')   
                    // 调用app方法处理返回: backToHome("1")  代表回到原生页， backToHome("0")表示能 goback就goback，不能就返回到原生页
                } catch (error) {
                    console.log("返回处理没有调到app方法，")
                }  
            } 
        }
        return {
            ...toRefs(state),
            goBack
        }
    }
}
</script>

<style lang="scss" scoped>
    .back{
        display: flex;
        position:fixed;
        z-index: 101;
        left: 30px;
        top: 30px;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        img{
            display: block;
            width: 50px;
            height: 50px;
        }
    }
</style>